<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>VUE3</title>
    <script src="https://cdn.tailwindcss.com?plugins=typography"></script>
  </head>
  <body>
    <div id="app" class="container mx-auto"></div>

    <template id="tpl">
      <div class="prose max-w-none my-6">
        <table>
          <thead>
            <tr>
              <th>#</th>
              <th class="w-[20%]">书籍名称</th>
              <th class="w-[20%]">出版日期</th>
              <th class="w-[20%]">价格</th>
              <th class="w-[20%]">购买数量</th>
              <th class="w-[15%]">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-if="books.length > 0"
              v-for="(book,idx) in books"
              :key="book.id"
              class="odd:bg-gray-100"
            >
              <td>{{ book.id }}</td>
              <td>《{{ book.name }}》</td>
              <td>{{ book.date }}</td>
              <td>￥{{ book.price }}</td>
              <td>
                <button class="px-2 border" @click="incrementCount(idx,-1)">
                  -
                </button>
                <span class="px-2 py-1">{{book.count}}</span>
                <button class="px-2 border" @click="incrementCount(idx,1)">
                  +
                </button>
              </td>
              <td>
                <span v-if="book.removing">
                  <button
                    class="px-2 border bg-blue-600 text-white"
                    @click="remove(book)"
                  >
                    确定
                  </button>
                  <button
                    class="px-2 border bg-cyan-600 text-white"
                    @click="setRemove(idx,false)"
                  >
                    取消
                  </button>
                </span>
                <span v-else>
                  <button
                    class="px-2 border bg-red-600 text-white"
                    @click="setRemove(idx,true)"
                  >
                    移除
                  </button>
                </span>
              </td>
            </tr>
            <tr v-else>
              <td colspan="6">没有数据</td>
            </tr>
          </tbody>
        </table>
        <div class="text-lg font-bold">
          <span v-if="amount>0">总价：￥{{amount}}</span>
          <span v-else>购物车为空</span>
        </div>
      </div>
    </template>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="./index.js"></script>
  </body>
</html>
